<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计 - 校园失物招领系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            overflow-x: hidden;
        }
        #sidebar {
            min-height: 100vh;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        .main-content {
            margin-left: 0;
            transition: margin-left 0.3s;
            position: relative;
            z-index: 1;
        }
        @media (min-width: 768px) {
            .main-content {
                margin-left: 25%;
            }
        }
        @media (min-width: 992px) {
            .main-content {
                margin-left: 16.666667%;
            }
        }
        .chart-container {
            height: 400px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
        }
        .stat-label {
            font-size: 1rem;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航栏 -->
            <div th:replace="fragments/sidebar :: sidebar"></div>

            <!-- 主内容区域 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">数据统计面板</h1>
                </div>

                <!-- 总体统计卡片 -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="stat-card">
                            <div class="stat-number" id="totalLost">0</div>
                            <div class="stat-label">失物总数</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="stat-card">
                            <div class="stat-number" id="totalClaimed">0</div>
                            <div class="stat-label">已认领数量</div>
                        </div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">热门丢失地点 TOP5</h5>
                            </div>
                            <div class="card-body">
                                <div id="locationChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">失物分类统计</h5>
                            </div>
                            <div class="card-body">
                                <div id="categoryChart" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script th:inline="javascript">
        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            loadOverviewData();
            loadCharts();
        });

        // 加载总体统计数据
        function loadOverviewData() {
            fetch('/stats/api/overview')
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        document.getElementById('totalLost').textContent = data.totalLost;
                        // 计算已认领数量（需要从其他接口获取）
                        loadClaimedCount();
                    }
                })
                .catch(error => console.error('Error loading overview data:', error));
        }

        // 加载已认领数量
        function loadClaimedCount() {
            fetch('/stats/api/claimed-count')
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        document.getElementById('totalClaimed').textContent = data.claimedCount;
                    }
                })
                .catch(error => console.error('Error loading claimed count:', error));
        }

        // 加载所有图表
        function loadCharts() {
            loadLocationChart();
            loadCategoryChart();
        }

        // 热门丢失地点图表
        function loadLocationChart() {
            fetch('/stats/api/lost-by-location')
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        const chart = echarts.init(document.getElementById('locationChart'));
                        const locations = data.map(item => item.location);
                        const counts = data.map(item => item.count);

                        chart.setOption({
                            title: { text: '', left: 'center' },
                            tooltip: { trigger: 'axis' },
                            xAxis: { 
                                type: 'category', 
                                data: locations,
                                axisLabel: { rotate: 45 }
                            },
                            yAxis: { type: 'value' },
                            series: [{
                                data: counts,
                                type: 'bar',
                                itemStyle: { color: '#5470c6' }
                            }]
                        });
                    }
                })
                .catch(error => console.error('Error loading location chart:', error));
        }

        // 失物分类统计图表
        function loadCategoryChart() {
            fetch('/stats/api/lost-by-category')
                .then(response => response.json())
                .then(data => {
                    if (data) {
                        const chart = echarts.init(document.getElementById('categoryChart'));
                        const categories = data.map(item => item.category);
                        const counts = data.map(item => item.count);

                        chart.setOption({
                            title: { text: '', left: 'center' },
                            tooltip: { trigger: 'item' },
                            series: [{
                                name: '失物分类',
                                type: 'pie',
                                radius: '70%',
                                data: data.map(item => ({
                                    name: item.category,
                                    value: item.count
                                })),
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        });
                    }
                })
                .catch(error => console.error('Error loading category chart:', error));
        }



        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
            const charts = [
                document.getElementById('locationChart'),
                document.getElementById('categoryChart')
            ];
            
            charts.forEach(chart => {
                if (chart && echarts.getInstanceByDom(chart)) {
                    echarts.getInstanceByDom(chart).resize();
                }
            });
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>